<template>
  <div>
    <div class="chart-box">
      <div class="chart-left">
        <button
          class="but"
          @click="btnFn1"
          :class="isshow == 1 ? 'active' : ''"
        >
          销售
        </button>
        <button
          class="but"
          @click="btnFn2"
          :class="isshow == 2 ? 'active' : ''"
        >
          销售额
        </button>
      </div>
      <div class="chart-right"></div>
    </div>
    <div id="box" style="width: 100%; height: 500px"></div>
    <div id="mapdemo" style="width: 100%; height: 800px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import * as http from "@/request/http";
import { onMounted, ref } from "vue";
import { PieSeriesOption } from "echarts";
import chane from "@/json/china.json";

const isshow = ref(1);

let btnFn1 = () => {
  isshow.value = 1;
};

let btnFn2 = () => {
  isshow.value = 2;
};

onMounted(() => {
  type EChartsOption = echarts.EChartsOption;
  var chartDom = document.getElementById("box")!;
  var myChart = echarts.init(chartDom);
  var option: EChartsOption;
  var option2: EChartsOption;
  let mydata: ISaleMap[] = [];

  function rendrMap() {
    //  处理获取到的地图数据
    const data = mydata.map((item) => ({
      name: item.areaName,
      value: item.saleNum,
    }));

    var Mymapdemo = echarts.init(document.getElementById("mapdemo")!);
    echarts.registerMap("china", chane as any);
    option2 = {
      title: {
        text: "全国销量分布图",
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/> {c}(p / km2)",
      },
      toolbox: {
        show: true,
        orient: "vertical",
        left: "right",
        top: "center",
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {},
        },
      },
      visualMap: {
        min: 0,
        max: 1000000,
        text: ["High", "Low"],
        realtime: false,
        calculable: true,
        inRange: {
          color: ["yellow", "red"],
        },
      },
      series: [
        {
          name: "",
          type: "map",
          map: "china",
          label: {
            show: false,
          },
          data: data,
        },
      ],
    };
    // 请求;
    // http.chart.getchartData().then((res) => {
    //   console.log(res);
    //   const mapData = res.data.saleMap;
    //   const data = mapData.map((item) => ({
    //     name: item.areaName,
    //     value: item.saleNum,
    //   }));
    //   console.log("map", data);

    //   // 更新data
    //   (option2.series as PieSeriesOption[])[0].data = data;
    //   option2 && Mymapdemo.setOption(option2);
    // });
    option2 && Mymapdemo.setOption(option2);
  }

  // 饼图
  option = {
    // 提示框
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(50,50,50,0.7)",
      textStyle: {
        color: "#FFF",
      },
    },
    // 图例
    legend: {
      orient: "vertical",
      left: "right",
      height: 100,
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        emphasis: {
          label: {
            show: true,
            fontWeight: "bold",
          },
        },
        label: {
          color: "inherit",
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  };

  // 请求饼图数据
  http.chart.getchartData().then((res) => {
    console.log(res);

    // 处理数据data  value name
    const pieData = res.data.salePie;
    const data = pieData.map((item) => ({
      value: item.yesterday_money,
      name: item.name,
    })) as PieSeriesOption[];

    console.log(data);
    // 更新data
    (option.series as PieSeriesOption[])[0].data = data;
    option && myChart.setOption(option);

    // 处理地图数据
    mydata = res.data.saleMap;

    rendrMap();
  });

  /**
   *
   *
   * //地图图表
   *
   *
   */
});
</script>

<style lang="less" scoped>
.chart-left {
  border-radius: 10px;
  .but {
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #b1b1b1;
  }
}
.active {
  background-color: #409eff;
  color: #fff;
}
</style>
